<template>
<div> 
  <div style="background-color: white">
    <div style="margin: 1%;" >
       <br>
      <span class="titlespan">{{ form.numberbom }} <span style="font-size: 10px; color: coral;">{{
        form.versionnumber
      }}</span>
      
      </span>
        

      <br />
      <br />
      <span style="margin-right: 10px">创建人: 依旧 </span
      ><span style="margin-right: 10px"> 创建时间：{{ form.creationTimes}}</span
      ><span style="margin-right: 10px">更新人:依旧 </span>

      <span style="margin-right: 10px">更新时间：{{form.lastModificationTimes}}</span>
      <br />
      <br />
      <br />
    </div>
    <div>
      <el-button>编辑</el-button>
      <el-button>删除</el-button>
      <el-button>启用</el-button>
      <el-button>禁用</el-button>
      <el-button>打印</el-button>
    </div>
    <br />

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基础信息" name="first">
        <div>
          <el-form :model="form.value" label-width="120px">
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="BOM编号">
                    <!-- <el-input v-model="form.productid"></el-input> -->
                    <span>{{ form.numberbom }}</span>
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="BOM版本">
                  <span>{{ form.versionnumber }}</span>
           
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                 <el-form-item label="默认BOM">
                  <span>{{ form.defaultbom=="1"?"是":"否"}}</span>
           
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="成品名称">
                      <span>{{ form.productname }}</span>
                 
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="成品编号">
                    <span>{{ form.processnumber }}</span>
                    </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="规格型号">
                      <span>{{ form.productmodel }}</span>
                
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="单位">
                  <span>{{ form.unit }}</span>
                    <!-- <el-input v-model="form.classname"></el-input> -->
                  </el-form-item>
                </div></el-col
              >
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple-light">
                  <el-form-item label="日产量">
                 <span>{{ form.dailyproduction }}</span>
                  </el-form-item>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="12"
                ><div class="grid-content ep-bg-purple">
                  <el-form-item label="当前库存">
                 <!-- 创建天数*日产量 -->
                   <span>{{ form.dailyproduction*30 }}</span>
                  </el-form-item>
                </div></el-col
              >
              
            </el-row>
           
           
          </el-form>
        </div>
       
      </el-tab-pane>
    
      <el-tab-pane label="物料配件" name="third">
 
 <el-table
          ref="multipleTableRef"
          :data="BOMtableData"
          style="width: 100%; margin-top: 10px"
          @selection-change="handleSelectionChange4"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" property="id" width="100px">
          </el-table-column>
             <el-table-column label="配件类型" property="accessorytype" width="100px">
              <template #default="scope">
                  {{scope.row.accessorytype=="1"?"物料":"产品"}}
              </template>
          </el-table-column>
          <el-table-column
            label="物料编号"
            property="materialnumber"
            width="200px"
          >
          </el-table-column>
          <el-table-column label="物料名称" property="name" width="200px">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specificationsversion"
            width="200px"
          >
          </el-table-column>
          <el-table-column label="单位" property="unit" width="200px">
          </el-table-column>
          <el-table-column
            label="物料类型"
            property="materialclassifyName"
            width="200px"
          >
          </el-table-column>
          <el-table-column
            label="物料属性"
            property="materialProperty"
            width="200px"
          >
          </el-table-column>
        </el-table>

      </el-tab-pane>
      <el-tab-pane label="BOM结构" name="fourth">
        <div v-if="ProducttableData.length>0">
          <el-table
          ref="multipleTableRef"
          :data="ProducttableData"
          style="width: 100%; margin:2%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="50">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="产品编号" property="productid" width="170">
          </el-table-column>
          <el-table-column label="产品名称" property="productname" width="150">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specification"
            width="120"
          >
          </el-table-column>
          <el-table-column label="单位" property="units" width="120">
          </el-table-column>
          <el-table-column label="产品类型" property="producttype" width="150">
          </el-table-column>
          <el-table-column label="预计使用量" property="usageamount" width="150">
          </el-table-column>
          <el-table-column label="实现使用量" property="practicalUsageamount" width="120">
          </el-table-column>
        </el-table>
        </div>
        <div v-else>
          暂无产品数据
        </div>
      </el-tab-pane>
      <el-tab-pane label="工艺路线" name="Material">
        <div v-if="MaterialtableData.length>0">
          <el-table
          ref="multipleTableRef"
          :data="ProducttableData"
          style="width: 100%; margin:2%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="50">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="物料编号名称" property="materialnumber" width="170">
          </el-table-column>
          <el-table-column label="物料名称" property="name" width="150">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specificationsversion"
            width="120"
          >
          </el-table-column>
          <el-table-column label="单位" property="units" width="120">
          </el-table-column>
          <el-table-column label="物料类型" property="materialtype" width="150">
          </el-table-column>
          <el-table-column label="预计使用量" property="usageamount" width="150">
          </el-table-column>
          <el-table-column label="实现使用量" property="practicalUsageamount" width="120">
          </el-table-column>
        </el-table>
        </div>
        <div v-else>
          暂无物料数据
        </div>
      </el-tab-pane>
        <el-tab-pane label="变更记录" name="Material">
        <div v-if="MaterialtableData.length>0">
          <el-table
          ref="multipleTableRef"
          :data="ProducttableData"
          style="width: 100%; margin:2%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="50">
            <template #default="scope">
              <el-butto>{{ scope.$index + 1 }}</el-butto>
            </template>
          </el-table-column>
          <el-table-column label="物料编号名称" property="materialnumber" width="170">
          </el-table-column>
          <el-table-column label="物料名称" property="name" width="150">
          </el-table-column>
          <el-table-column
            label="规格型号"
            property="specificationsversion"
            width="120"
          >
          </el-table-column>
          <el-table-column label="单位" property="units" width="120">
          </el-table-column>
          <el-table-column label="物料类型" property="materialtype" width="150">
          </el-table-column>
          <el-table-column label="预计使用量" property="usageamount" width="150">
          </el-table-column>
          <el-table-column label="实现使用量" property="practicalUsageamount" width="120">
          </el-table-column>
        </el-table>
        </div>
        <div v-else>
          暂无物料数据
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  </div>
</template>
    <script>
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { GETBOMONEDATA } from "../../api/BOM.js";
export default {
  setup() {
    const activeName = ref("first");
    const BOMtableData = ref([]);
    const MaterialtableData = ref([]);
    const ProducttableData = ref([]);
    const form = ref({
      lastModificationTimes:"",
      creationTimes:"",
     numberbom: "",
      versionnumber: "",
      productname: "",
      productnumber: "",
      productmodel: "",
      unit: "",
      defaultbom: "",
      dailyproduction: null,
      parentid: 0,
      processnumber: "",
      remark: "",
      materialData: [],
    });
    const route = useRoute();
    const selectId = ref("");
    const Data = reactive({});
    const attachment = ref([]);
    const getData = () => {
    
      selectId.value = route.query.id;
      GETBOMONEDATA(selectId.value).then((res) => {
          form.value=  res.result
          BOMtableData.value=form.value.detailList
          console.log(BOMtableData.value)
          console.log(form.value)
      });
    };
    getData();
    
    return {
      BOMtableData,
      MaterialtableData,
      ProducttableData,
      activeName,
      form,
      route,
      selectId,
      Data,
      attachment,
      getData,
    };
  },
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.titlespan{
 
  font-style: "+";
font-weight: bold;
    font-size: 20px;
}
.span1{
   background-color: red;
}
span{
   margin: 3%;
}
</style>
    